@import './dashvariables.scss';
@import './mixins.scss';

// DASH-STATUS
.dash-status {
  min-width: 3em;
  text-align: center;

  .dash-status-pass {
    color: $dash-status-pass;
    @include text-lg;
  }

  .dash-status-warn {
    color: $dash-status-warn;
    @include text-lg;
  }

  .dash-status-fail {
    display: inline-block;
    font-weight: bold;
    width: 2em;
    height: 2em;
    background: $dash-status-fail;
    border: .2em solid $dash-status-fail-border;
    color: $dash-status-fail-text;
    line-height: 1.75em;
    @include border-radius(50%);

    // add a halo around the alert icon
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  }

  .dash-status-ignore {
    display: inline-block;
    font-weight: bold;
    width: 2em;
    height: 2em;
    background: $dash-status-ignore;
    border: .2em solid $dash-status-ignore-border;
    color: $dash-status-ignore-text;
    line-height: 1.75em;
    @include border-radius(50%);
  }

  .dash-status-critical {
    display: inline-block;
    font-weight: bold;
    width: 2em;
    height: 2em;
    background: black;
    border: .2em solid $dash-status-fail-border;
    color: $dash-status-fail;
    line-height: 1.75em;
    @include border-radius(50%);
  }
}

.dash-status-lg {
  .dash-status {
    margin: .1em 0;
  }

  .dash-status-fail {
    width: 2.75em;
    height: 2.75em;
    line-height: 2.4em;
  }
}

.widget.alert .dash-status {
  .dash-status-pass {
    color: $dash-status-alert-pass !important;
  }

  .dash-status-warn {
    color: $dash-status-alert-warn !important;
  }

  .dash-status-fail {
    background-color: $dash-status-alert-fail !important;
  }
}

.widget-font-pass {
  color: $dash-status-pass !important;
}

.widget-font-fail {
  color: $dash-status-fail !important;
}

.widget-font-warn {
  color: $dash-status-warn !important;
}

.widget-font-bold {
  font-weight: bolder;
}
